<template>
  <div id='detailContainer' class="detailSlide">
      <Mheader title="影片详情">
          <i class="iconfont icon-right" @click="back"></i>
      </Mheader>
      <div id="content" class="contentDetail">
			<div class="detail_list">
				<div class="detail_list_bg" :style="bg(data.mainpic)"></div>
				<div class="detail_list_filter"></div>
				<div class="detail_list_content">
					<div class="detail_list_img">
						<img :src="data.mainpic" alt="">
					</div>
					<div class="detail_list_info">
						<h2>{{data.title}}</h2>
						<p>{{data.daoyan}}</p>
						<p>9.2</p>
						<p>{{data.type}}</p>
						<p>{{data.country}} / {{data.duration}}</p>
						<p>{{data.time}}</p>
					</div>
				</div>
			</div>
			<div class="detail_intro">
				<p>{{data.content}}</p>
			</div>
			<div class="detail_player swiper-container">
				<ul class="swiper-wrapper">
					<li class="swiper-slide" v-for="(person,index) in data.photos" :key="index">
						<div>
							<img :src="person.img" alt="">
						</div>
						<p>{{person.name}}</p>
						<p>{{person.type}}</p>
					</li>
				</ul>
			</div>
		</div>
  </div>
</template>

<script>
import Mheader from '@/components/Mheader'
export default {
    name:'Detail',
    components:{
        Mheader
    },
    data(){
        return {
            data:''
        }
    },
    methods:{
        back(){
            this.$router.back();
        },
        bg(pic){
            return{
                backgroundImage:'url('+pic+')'
            }
        }
    },
    async created(){
        let id = this.$route.params.id
        let data = await this.$axios.get('api/detail?id='+id)
        console.log(data);
        this.data = data
        this.$nextTick(function(){
            new Swiper('.detail_player' , {
                slidesPerView : 'auto',
                freeMode : true,
                freeModeSticky: true
            });
        })
        console.log(this.$route);

         
    }
}
</script>

<style scoped>
#detailContainer{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
    background: #ffffff;
    min-height: 100%;
}
/* 进入动画 */
.detailSlide{
    animation: slide .5s;
}

@keyframes slide {
    from{
        transform: translateX(100%);
    }
    to{
        transform: translateX(0);
    }
}

#content.contentDetail{ display: block; margin-bottom:0;}
#content .detail_list{ height:200px; width:100%; position: relative; overflow: hidden;}
.detail_list .detail_list_bg{ width:100%; height:100%; background: url(/images/movie_1.jpg) 0 40%; filter: blur(20px); background-size:cover; position: absolute; left: 0; top: 0;}
.detail_list .detail_list_filter{ width:100%; height:100%; position: absolute;background-color: #40454d;opacity: .55; position: absolute; left: 0; top: 0; z-index: 1;}
.detail_list .detail_list_content{ display: flex; width:100%; height:100%; position: absolute; left: 0; top: 0; z-index: 2;}
.detail_list .detail_list_img{ width:108px; height: 150px; border: solid 1px #f0f2f3; margin:20px;}
.detail_list .detail_list_img img{ width:100%; height: 100%;}
.detail_list .detail_list_info{ margin-top: 20px;}
.detail_list .detail_list_info h2{ font-size: 20px; color:white; font-weight: normal; line-height: 40px;}
.detail_list .detail_list_info p{ color:white; line-height: 20px; font-size: 14px; color:#ccc;}

#content .detail_intro{ padding: 10px;}
#content .detail_player{ margin:20px;}
.detail_player .swiper-slide{ width:70px; margin-right: 20px; text-align: center; font-size: 14px;}
.detail_player .swiper-slide img{ width:100%; margin-bottom: 5px;}
.detail_player .swiper-slide p:nth-of-type(2){ color:#999;}
</style>